<%--
  Created by IntelliJ IDEA.
  User: 小龙
  Date: 2019/8/18
  Time: 20:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<html>
<head>
    <title>用户信息表</title>
    <link href="../layui/css/layui.css" type="text/css" rel="stylesheet" />
    <script src="../js/ajaxfileupload.js"></script>
    <script src="../js/jquery-1.12.4.js"></script>
    <script src="../layui/layui.all.js" charset="utf-8"></script>
    <style type="text/css">
        .layui-table-cell{
            height: auto;
            line-height: 28px;
        }
    </style>
    <script src="../layui/layui.js" type="text/javascript"></script>
    <script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        layui.use('table', function(){
            var table = layui.table;
            table.render({
                elem: "#myTable",
               //提交数据的地址
                url: "/user/selectAll",
                //开启分页,
                page: true,
                toolbar:"#myToolbar",
                cols: [[
                    {type:"checkbox"},
                    {title:"编号",field:"userId"},

                    {title:"电话",field:"userTelphone"},
                    // {title:"状态",field:"bannerState",templet:"#myGrender"},
                    {title:"密码",field:"userPassword"},
                    {title:"图片",field:"userImage",width:117,templet:'<div><img src="{{d.userImage}}"></div>'},
                    {title:"昵称",field:"userNickName"},
                    {title:"姓名",field:"userName"},
                    {title:"性别",field:"userSex"},
                    {title:"个性签名",field:"userAutograph"},
                    {title:"省份",field:"userProvince"},
                    {title:"省份",field:"userProvince"},
                    {title:"城市",field:"userCity"},
                    {title:"上师",templet:'<div>{{d.guru.guruId}}</div>'},
                    {title:"状态",field:"userStatus",templet:"#myGrender"},
                    {title:"创建时间",field:"userCreateDate"},
                    {title:"操作",templet:"#CaoZuo"}
                ]]
            });
        });

        //  layui.use(["form","layer","table"],function () {
        //     var form = layui.form;
        //     var layer = layui.layer;
        //     var table = layui.table;
        //     当点击提交按钮的时候，会进入到这个函数
        //     当所有的验证都通过时，才会进入到这个函数
        //     form.on("submit(update)", function (data) {
        //         $.ajax({
        //             url: "/banner/update",
        //             data: data.field,
        //             type: "post",
        //             success: function (data) {
        //                 //console.log(data)
        //                 //1.关闭掉添加弹出层
        //                 layer.closeAll('page');
        //                 //2.提示添加成功
        //                 if (data.isUpdate) {
        //                     layer.alert("修改成功", {time: 3000});
        //                 } else {
        //                     layer.alert("修改失败", {time: 3000});
        //                 }
        //                 //3.刷新table
        //                 table.reload("myTable");
        //             }
        //         })
        //         return false;//阻止跳转；
        //     });
        //
        // });
            //修改操作
            function toOpenUpdateLayer(id) {
                //1.获取当前行数据===》发送ajax请求，获取当前行数据
                var form=layui.form;
                $.ajax({
                    url: "/user/selectOne",
                    data: "id=" + id,
                    success: function (data) {
                        $("#userid").val(data.userId);
                        $("#usertelphone").val(data.userTelphone);
                        $("#imgdemo2").attr("src",data.userImage);
                        $("#usernickname").val(data.userNickName);
                        $("#username").val(data.userName);
                        $("#usersex").val(data.userSex);
                        $("#userautograph").val(data.userAutograph);
                        $("#userprovince").val(data.userProvince);
                        $("#usercity").val(data.userCity);
                    }
                });
                //2.把数据填充到修改弹出层中==>弹出层显示，修改弹出层
                $("#updateSubmitBtn").show();
                layui.use('layer', function () {
                    layer.open({
                        title: "修改用户信息",
                        content: $("#updateFrom"),
                        type: 1,
                    })
                });
            }
            //添加弹出层
            function toOpenAddLayer() {
                layui.use('layer', function () {
                    $("#insertFrom")[0].reset();
                    layer.open({
                        title: "添加用户",
                        content: $("#insertFrom"),
                        type: 1,
                    })
                });

            }

            //删除一条数据
        function doDelete(id) {
            //确认；如果点击确认删除；否则不删除
            layui.use(['layer','table'], function(){
                var table = layui.table;
                layer.confirm('确定要删除嘛？', {icon: 3, title:'确认删除'}, function(index){
                    $.ajax({
                        url:"/user/delete",
                        data:"id="+id,
                        success:function(data){
                            layer.alert(data.isDelete,{time:2000});
                            table.reload("myTable");
                            layer.close(index);
                        }
                    })
                });
            });

        }

        function xiugai(userId,userStatus) {
            layui.use(['layer', 'table'], function () {
                var table = layui.table;
                layer.confirm('确定要修改嘛？', {icon: 3, title: '确认'}, function (index) {
                    $.ajax({
                        url: "/user/updates",
                        data: {"userId": userId, "userStatus": userStatus},
                        dataType: 'json',
                        success: function (data) {
                            layer.alert(data.isUpdate, {time: 2000});
                            table.reload("myTable");

                            layer.close(index);
                        }
                    })
                });
            });
        }


        // 下载全部数据
        function doDownload() {
            //确认；如果点击确认删除；否则不删除
            layui.use(['layer','table'], function(){
                var table = layui.table;
                layer.confirm('确定要导出全部数据嘛？', {icon: 3, title:'确认导出'}, function(index){
                    $.ajax({
                        url:"/user/download",
                        success:function(data){
                            layer.alert(data.isxiazai,{time:2000});
                            table.reload("myTable");
                            layer.close(index);
                        }
                    })
                });
            });
        }

        //搜索操作
        function doSearch() {
            //1.获取到输入框中输入的内容
            var userName = jQuery("#uusername").val();
            //发送请求，并且接收数据
            layui.use('table', function () {
                var table = layui.table;
                table.reload('myTable', {
                    where: {"userName": userName}
                });
            });
        }

    </script>
    <script type="text/html" id="myGrender">
        {{#  if(d.userStatus ==1){ }}
        激活
        {{#  } else { }}
        冻结
        {{#  } }}
    </script>
    <script id="CaoZuo" type="text/html">
        <%--<button type="button" class="layui-btn layui-btn-radius layui-btn-normal" onclick="toOpenUpdateLayer('{{d.userId}}')">修改</button>--%>
        <button type="button" class="layui-btn layui-btn-danger layui-btn-radius" onclick="doDelete('{{d.userId}}')">删除</button>
        {{#  if(d.userStatus ==1){ }}
        <button type="button" class="layui-btn layui-btn-warm layui-btn-radius"  onclick="xiugai('{{d.userId}}','{{d.userStatus}}')">冻结</button>
        {{#  } else { }}
        <button type="button" class="layui-btn layui-btn-radius"   onclick="xiugai('{{d.userId}}','{{d.userStatus}}')">激活</button>
        {{#  } }}
    </script>

</head>
<body>

<table id="myTable" lay-data="{id: 'myTable'}"></table>
    <div id="myToolbar" style="display: none;">
    <%--<button type="button" class="layui-btn layui-btn-radius" onclick="toOpenAddLayer()">--%>
        <%--<i class="layui-icon">&#xe608;</i> 添加用户--%>
    <%--</button>--%>
        <div class="layui-inline">
        <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" onclick="doDownload()">
            <i class="layui-icon">导出用户数据</i></button>
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline" style="width: 300px;">
                <input type="text" class="layui-input" id="uusername">
            </div>
            <div class="layui-input-inline" style="width: 100px;">
                <button type="button" class="layui-btn layui-btn-normal" onclick="doSearch()">
                    <i class="layui-icon layui-icon-search"></i> 搜索
                </button>
            </div>
        </div>


</div>


<%--修改用户信息--%>
<form id="updateFrom" style="display: none" class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">编号</label>
        <div class="layui-input-block">
            <input name="userId" id="userid" class="layui-input" value="0" readonly/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-block">
            <input name="userTelphone" id="usertelphone" class="layui-input" placeholder="请输入新的手机号码" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">选择要上传头像</label>
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="updateUpload">上传头像</button>
            <div class="layui-upload-list">
                <img style="width: 100px;height: 100px" class="layui-upload-img" id="imgdemo2">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-block">
            <input name="userNickName" id="usernickname" class="layui-input" placeholder="请输入新的昵称" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input name="userName" id="username" class="layui-input" placeholder="请输入名字" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input name="userSex" id="usersex" class="layui-input" placeholder="请输入名字" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">个性签名</label>
        <div class="layui-input-block">
            <input name="userAutograph" id="userautograph" class="layui-input" placeholder="请输入个性签名" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">省份</label>
        <div class="layui-input-block">
            <input name="userProvince" id="userprovince" class="layui-input" placeholder="请输入省份" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">城市</label>
        <div class="layui-input-block">
            <input name="userCity" id="usercity" class="layui-input" placeholder="请输入城市" />
        </div>
    </div>





    <div class="layui-form-item">
        <button lay-submit type="button" lay-filter="update" class="layui-btn" onclick="update()" id="updateSubmitBtn">修改用户信息</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>
<script>
    // 公共变量 有没有选择图片
    var file_upload_status = false;


    layui.use('upload', function() {
        var upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#updateUpload',
            url: '${pageContext.request.contextPath}/user/update',
            // 1.开启多文件上传 有一个文件队列（集合）
            multiple: true,
            number:1,
            data:{

                userId: function () {
                    return $('#userid').val()
                },

                userTelphone: function () {
                    return $('#usertelphone').val()
                },

                userNickName: function () {
                    return $('#usernickname').val()
                },
                userName: function () {
                    return $('#username').val()
                },

                userSex: function () {
                    return $('#usersex').val()
                },

                userAutograph: function () {
                    return $('#userautograph').val()
                },
                userProvince: function () {
                    return $('#userprovince').val()
                },
                userCity: function () {
                    return $('#usercity').val()
                },
            },
            //不让文件上传组件自动上传
            auto:false,
            //绑定提交按钮，来决定什么时候往后台发送数据
            bindAction:'#updateSubmitBtn',

            choose: function (obj) {
                var files = this.files = obj.pushFile();
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    file_upload_status = true;
                    $('#imgdemo2').attr('src', result); //图片链接（base64）
                });
            },
            done: function(res,index,upload) {
                // 获取上传的结果 获取后台的响应  如有响应的json可以获取
                // 如果上传失败


                //上传成功后进行清空表单，清空imggs的值，清空文件上传组件中的文件对象
                //并刷新table
                console.info(index);
                file_upload_status = false;
                $('#imgdemo2').attr('src',"");
                delete this.files[index];

                layer.closeAll('page');
                var table=layui.table;
                table.reload("myTable");

                if (res.code > 0) {
                    return layer.msg('"修改失败"');
                } else {
                    // 上传成功 刷新table
                    return layer.msg('修改成功');
                }
            }
        });
    });


    //修改没有图片使用ajax
    function update() {
        if(!file_upload_status){
                //没有图片，可以执行ajax
                $.ajax({
                    url:"${pageContext.request.contextPath}/user/update",
                    data:{
                        userId:$("#userid").val(),
                        userTelphone:$("#usertelphone").val(),
                        userNickName:$("#usernickname").val(),
                        userName:$("#username").val(),
                        userSex:$("#usersex").val(),
                        userAutograph:$("#userautograph").val(),
                        userProvince:$("#userprovince").val(),
                        userCity:$("#usercity").val()

                    },
                    success:function (data) {
                        console.info(data)
                        layer.closeAll('page');
                        var table=layui.table;
                        table.reload("myTable");
                    }
                })
        }
    }
</script>
<%--&lt;%&ndash;添加用户信息&ndash;%&gt;--%>
<%--<form id="insertFrom" style="display: none" class="layui-form">--%>
    <%--<div class="layui-form-item">--%>

        <%--<div>--%>
            <%--<label class="layui-form-label">选择要上传图片</label>--%>
            <%--<div class="layui-upload">--%>
                <%--<button type="button" class="layui-btn" id="test1" >上传图片</button>--%>
                <%--<div class="layui-upload-list">--%>
                    <%--<img class="layui-upload-img" style="width: 100px;height: 100px" id="imgdemo1">--%>
                    <%--<p id="demoText"></p>--%>
                <%--</div>--%>
            <%--</div>--%>
        <%--</div>--%>
    <%--</div>--%>
    <%--<div class="layui-form-item">--%>
        <%--<label class="layui-form-label">轮播图名字</label>--%>
        <%--<div class="layui-input-block">--%>
            <%--<input name="bannerOldName" id="bannerOldName"  class="layui-input" placeholder="请输入轮播图名字" />--%>
        <%--</div>--%>
    <%--</div>--%>

    <%--<div class="layui-form-item">--%>
        <%--<label class="layui-form-label">描述</label>--%>
        <%--<div class="layui-input-block">--%>
            <%--<input name="bannerDescription"  id="bannerDescription" class="layui-input" placeholder="请输入图片描述" />--%>
        <%--</div>--%>
    <%--</div>--%>


<%--</div>--%>
    <%--<div class="layui-form-item">--%>
        <%--<button lay-submit type="button" lay-filter="insert" class="layui-btn" onclick="add()"  id="insertSubmitBtn">添加轮播图信息</button>--%>
        <%--<button type="reset" class="layui-btn layui-btn-primary">重置</button>--%>
    <%--</div>--%>
<%--</form>--%>


<%--<script>--%>
    <%--// 公共变量 有没有选择图片--%>
    <%--var file_upload_status = false;--%>

    <%--layui.use('upload', function() {--%>
            <%--var upload = layui.upload;--%>

        <%--//普通图片上传--%>
        <%--var uploadInst = upload.render({--%>
            <%--elem: '#test1',--%>
            <%--url: '/banner/insert',--%>
            <%--multiple: true,--%>
            <%--number:1,--%>
            <%--data:{--%>
                <%--bannerOldName: function () {--%>
                    <%--return $('#bannerOldName').val()--%>
                <%--},--%>
                <%--bannerDescription: function () {--%>
                    <%--return $('#bannerDescription').val()--%>
                <%--},--%>
            <%--},--%>
            <%--//不让文件上传组件自动上传--%>
            <%--auto:false,--%>
            <%--//绑定提交按钮，来决定什么时候往后台发送数据--%>
            <%--bindAction:'#insertSubmitBtn',--%>

            <%--choose: function (obj) {--%>
                <%--var files = this.files = obj.pushFile();--%>


                <%--//预读本地文件示例，不支持ie8--%>
                <%--obj.preview(function (index, file, result) {--%>
                    <%--file_upload_status = true;--%>
                    <%--$('#imgdemo1').attr('src', result); //图片链接（base64）--%>
                <%--});--%>
            <%--},--%>
            <%--done: function(res, index, upload) {--%>
                <%--// 获取上传的结果 获取后台的响应  如有响应的json可以获取--%>
                <%--// 如果上传失败--%>
                <%--console.info(index);--%>
                <%--file_upload_status = false;--%>
                <%--$('#imgdemo1').attr('src', "");--%>
                <%--delete this.files[index];--%>

                <%--layer.closeAll('page');--%>
                <%--var table=layui.table;--%>
                <%--table.reload("myTable");--%>

                <%--if (res.code > 0) {--%>
                    <%--return layer.msg('"添加失败"');--%>
                <%--} else {--%>
                    <%--// 上传成功 刷新table--%>
                     <%--return layer.msg('添加成功');--%>
                <%--}--%>
            <%--}--%>
        <%--});--%>
    <%--});--%>



<%--</script>--%>



</body>
</html>
